<script setup name="Maintenance">
import { GetListAPI, AddDataAPI, EditDataAPI, GetDeiltsAPI, DelDataAPI } from '@/api/device/spotCheck/project.js'
import AddForm from './addForm.vue'
// vue3方法实例
const { proxy } = getCurrentInstance()

// 新增 || 修改 || 查看实例
const addFromRef = ref(null)

// 按钮枚举
const btnList = ref([])

// 储存数据
const ruleForm = ref({})
const state = reactive({
  btnloading: false, //保存加载状态
  total: 0, // 列表总数量
  isShow: false, // 新增弹窗状态
  title: '新增', // 标题
  loading: false, // 表格加载状态
  ids: [], //勾选的id
  multipleDis: false, //多选禁用
  singleDis: false, //单选禁用
  rows: [] //勾选的数据
})

const tabelData = ref([])

// 查询条件
const SelectList = ref([
  { label: '项目编号', model: 'pointTestProjectCode', type: '输入框' },
  { label: '项目名称', model: 'pointTestProjectName', type: '输入框' }
])

// 初始化按钮
const initBtn = () => {
  btnList.value = [
    {
      label: '新增',
      type: 'add',
      hasPermi: 'device:spotcheck:project:add'
    }
  ]
}
initBtn()

// 列表枚举
const column = ref([
  { label: '项目编号', prop: 'pointTestProjectCode' },
  { label: '项目名称', prop: 'pointTestProjectName' },
  { label: '点检部位', prop: 'pointTestPosition' },
  { label: '点检方式', prop: 'pointTestModeDict' },
  { label: '点检内容', prop: 'pointTestContent' },
  { label: '检验标准', prop: 'inspectionStandard' },
  { label: '检验类型', prop: 'inspectionTypeDict' },
  { label: '判定结果项', prop: 'decisionResult' },
  { label: '标准工时', prop: 'workingHour' },
  { label: '备注', prop: 'remark' },
  { label: '创建人', prop: 'createBy' },
  { label: '创建时间', prop: 'createTime' },
  { label: '操作', prop: 'x' }
])

// 查询条件 分页
const query = reactive({
  pageNum: 1,
  pageSize: 10
})

// 查询
const selectSubmit = obj => {
  Object.keys(obj).forEach(itemKey => (query[itemKey] = obj[itemKey]))

  getList()
}

// 勾选列表数据时
const handleSelectionChange = ({ ids, row }) => {
  state.ids = ids
  state.rows = row
  state.multipleDis = !row.length
  state.singleDis = row.length != 1
  initBtn()
}
handleSelectionChange({ ids: [], row: [] })

// 新增
const addDic = () => {
  state.title = '新增'
  state.isShow = true
}

// 修改弹窗
const edit = async id => {
  state.title = '修改'
  proxy.loading('请求中，请稍后')
  try {
    const { data: res } = await GetDeiltsAPI(id)
    ruleForm.value = res
    state.isShow = true
  } catch (err) {
    console.error(err)
  } finally {
    proxy.closeLoading()
  }
}

// 查看弹窗
const seeDic = async id => {
  state.title = '查看'
  proxy.loading('请求中，请稍后')
  try {
    const { data: res } = await GetDeiltsAPI(id)
    ruleForm.value = res
    state.isShow = true
  } catch (err) {
    console.error(err)
  } finally {
    proxy.closeLoading()
  }
}

// 弹窗取消
const close = () => {
  ruleForm.value = {}
  state.isShow = false
}

// 新增提交后台
const addSub = async () => {
  const result = await addFromRef.value.submit()
  if (!result) return
  state.btnloading = true
  try {
    await AddDataAPI(result)
    getList()
    close()
    proxy.successMsg('新增成功！')
  } catch (err) {
    console.error(err)
  } finally {
    state.btnloading = false
  }
}

// 修改提交后台
const editSub = async () => {
  const result = await addFromRef.value.submit()
  if (!result) return
  state.btnloading = true
  try {
    await EditDataAPI(result)
    getList()
    close()
    proxy.successMsg('修改成功！')
  } catch (err) {
    console.error(err)
  } finally {
    state.btnloading = false
  }
}

//删除
const remove = async id => {
  const isif = await proxy.DelMessageBox()
  if (!isif) return
  proxy.loading('删除中，请稍后')
  try {
    await DelDataAPI(id)
    getList()
    close()
    proxy.successMsg('删除成功！')
  } catch (err) {
    console.error(err)
  } finally {
    proxy.closeLoading()
  }
}

// 获取列表数据
const getList = async () => {
  state.loading = true
  try {
    const res = await GetListAPI(query)
    state.total = res.total
    tabelData.value = res.rows
  } catch (err) {
    console.error(err)
  } finally {
    state.loading = false
  }
}
getList()
</script>

<template>
  <div class="app-container">
    <!-- 查询条件组件 -->
    <p-select-form :selectForm="SelectList" @selectSubmit="selectSubmit" />
    <el-card class="box-card">
      <p-table
        :loading="state.loading"
        keyId="id"
        :column="column"
        :data="tabelData"
        @change="handleSelectionChange"
        :total="state.total"
        v-model:page="query.pageNum"
        v-model:limit="query.pageSize"
        @pagination="getList"
      >
        <template #buttons>
          <!-- 按钮组件 -->
          <p-button :list="btnList" @add="addDic" @remove="batchRemove" />
        </template>
        <template #columnCell="{ column, record }">
          <p-operate
            v-if="column.prop == 'x'"
            :list="[
              {
                icon: 'Edit',
                emit: 'edit',
                text: '修改',
                type: 'primary',
                hasPermi: 'device:spotcheck:project:edit'
              },
              {
                icon: 'Delete',
                emit: 'remove',
                text: '删除',
                type: 'danger',
                hasPermi: 'device:spotcheck:project:remove'
              },
              {
                icon: 'Search',
                emit: 'look',
                text: '查看',
                type: 'primary',
                hasPermi: 'device:spotcheck:project:query'
              }
            ]"
            @edit="edit(record.id)"
            @remove="remove(record.id)"
            @look="seeDic(record.id)"
          />
        </template>
      </p-table>
    </el-card>
    <!-- 新增弹窗 -->
    <p-dialog
      v-model="state.isShow"
      @ok="state.title == '新增' ? addSub() : editSub()"
      :title="state.title"
      @close="close"
      width="50%"
    >
      <template #body>
        <AddForm ref="addFromRef" :disabled="state.title == '查看'" :data="ruleForm" :title="state.title" />
      </template>
    </p-dialog>
  </div>
</template>

<style lang="scss" scoped>
.btnmp {
  margin-bottom: 15px;
}
</style>
